<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>

    <div id="app">
        <p>{{msg}}</p>
        <button v-on:click="handleClick">v-on:单击按钮</button>
        <button @click="handleClick">@单击按钮</button>
        <h5>选择感兴趣技术</h5>
        <select v-on:change="handleChange">
            <option value="web">网站前端技术</option>
            <option value="python">Python编程技术</option>
            <option value="java">Java编程技术</option>
        </select>
        <h5>表单提交</h5>
        <form v-on:submit.prevent="handleSubmit">
            <input type="checkbox" v-on:click="handleDisabled">
            统一本站协议
            <br><br>
            <button :disabled="isDisabled">注册</button>
        </form>
    </div>

<!--引入vue文件-->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
    const vm = Vue.createApp({
        // 该函数返回数据对象
        data() {
            return {
                msg: "注册账户",
                isDisabled: true
            }
        },
        // methods对象
        methods: {
            // 通过methods来定义需要的方法
            handleClick: function(){
                console.log("按钮被点击了")
            },
            handleChange: function(event) {
                console.log("选择了某选项" + event.target.value);
            },
            handleSubmit:function(){
                console.log("触发事件handleSubmit")
            },
            handleDisabled: function(event) {
                console.log("注册按钮" + event.target.checked);
                if (event.target.checked == true) {
                    this.isDisabled = false;
                } else {
                    this.isDisabled = true;
                }
            }
        }
    }).mount('#app');
</script>



</body>
</html>
